<template>
  <div class="container-report">
    <Breadcrumb :items="['我的答题', 'AI分析报告']" />
    <a-spin :loading="loading" style="width: 100%">
      <div class="report-content">
        <div class="report-header">
          <div class="problem-info">
            <h2>题目 ID: {{ problemId }}</h2>
            <h3>题目名称: {{ problemTitle }}</h3>
          </div>
          <div class="submission-info">
            <a-space size="large">
              <a-tag size="medium" color="green" v-if="status === 'Accepted'">
                通过
              </a-tag>
              <a-tag size="medium" color="red" v-else>未通过</a-tag>
              <a-space>
                <span class="info-label">内存:</span>
                <span class="info-value">{{ memory }} KB</span>
              </a-space>
              <a-space>
                <span class="info-label">耗时:</span>
                <span class="info-value">{{ time }} ms</span>
              </a-space>
              <a-space>
                <span class="info-label">提交时间:</span>
                <span class="info-value">{{ submitTime }}</span>
              </a-space>
            </a-space>
          </div>
        </div>

        <a-row :gutter="16">
          <a-col :span="11">
            <a-card class="code-card">
              <template #title>
                <div class="card-title">
                  <icon-code />
                  <span>提交的代码</span>
                </div>
              </template>
              <div class="code-wrapper">
                <pre class="code-block"><code>{{ submittedCode }}</code></pre>
              </div>
            </a-card>
          </a-col>
          <a-col :span="13">
            <a-card class="analysis-card">
              <template #title>
                <div class="card-title">
                  <icon-robot />
                  <span>AI 分析建议</span>
                </div>
              </template>

              <a-typography>
                <!--                &lt;!&ndash; 调试信息区域 &ndash;&gt;-->
                <!--                <a-alert v-if="true" type="info" title="调试信息" closable>-->
                <!--                  <p>-->
                <!--                    logicErrors类型:-->
                <!--                    {{-->
                <!--                      Array.isArray(reportData.logicErrors)-->
                <!--                        ? 'Array'-->
                <!--                        : typeof reportData.logicErrors-->
                <!--                    }}-->
                <!--                  </p>-->
                <!--                  <p>-->
                <!--                    logicErrors长度:-->
                <!--                    {{-->
                <!--                      Array.isArray(reportData.logicErrors)-->
                <!--                        ? reportData.logicErrors.length-->
                <!--                        : '非数组'-->
                <!--                    }}-->
                <!--                  </p>-->
                <!--                  <p>-->
                <!--                    optimizationSuggestions类型:-->
                <!--                    {{-->
                <!--                      Array.isArray(reportData.optimizationSuggestions)-->
                <!--                        ? 'Array'-->
                <!--                        : typeof reportData.optimizationSuggestions-->
                <!--                    }}-->
                <!--                  </p>-->
                <!--                  <p>-->
                <!--                    learningPath类型:-->
                <!--                    {{-->
                <!--                      Array.isArray(reportData.learningPath)-->
                <!--                        ? 'Array'-->
                <!--                        : typeof reportData.learningPath-->
                <!--                    }}-->
                <!--                  </p>-->

                <!--                  &lt;!&ndash; 显示原始JSON &ndash;&gt;-->
                <!--                  <details>-->
                <!--                    <summary>点击查看原始数据</summary>-->
                <!--                    <pre-->
                <!--                      style="-->
                <!--                        max-height: 200px;-->
                <!--                        overflow: auto;-->
                <!--                        background: #f5f5f5;-->
                <!--                        padding: 10px;-->
                <!--                        border-radius: 4px;-->
                <!--                      "-->
                <!--                      >{{ JSON.stringify(reportData, null, 2) }}</pre-->
                <!--                    >-->
                <!--                  </details>-->
                <!--                </a-alert>-->

                <a-typography-title :heading="5">语法检查</a-typography-title>
                <a-typography-paragraph
                  v-if="!reportData.syntaxCheck?.hasError"
                >
                  没有语法错误。
                </a-typography-paragraph>
                <a-typography-paragraph v-else>
                  <ul class="custom-list">
                    <li
                      v-for="(error, index) in reportData.syntaxCheck?.errors"
                      :key="index"
                    >
                      <div class="list-header">
                        <span class="domain">
                          第{{ error.line }}行: {{ error.type }}
                        </span>
                      </div>
                      <div class="list-content">
                        <span class="suggestion-label">错误:</span>
                        {{ error.message }}
                        <br />
                        <span class="suggestion-label">建议:</span>
                        {{ error.suggestion }}
                      </div>
                    </li>
                  </ul>
                </a-typography-paragraph>

                <a-typography-title :heading="5">逻辑错误</a-typography-title>
                <a-typography-paragraph v-if="!reportData.logicErrors?.length">
                  没有逻辑错误。
                </a-typography-paragraph>
                <a-typography-paragraph v-else>
                  <ul class="custom-list">
                    <li
                      v-for="(error, index) in reportData.logicErrors"
                      :key="index"
                    >
                      <div class="list-header">
                        <span class="domain">逻辑问题</span>
                      </div>
                      <div class="list-content">
                        <span class="suggestion-label">问题:</span>
                        {{ error.description || error.problem || '未指定问题' }}
                        <br />
                        <span class="suggestion-label">原因:</span>
                        {{ error.cause || error.reason || '未指定原因' }}
                        <br />
                        <span class="suggestion-label">建议:</span>
                        {{ error.suggestion || error.fix || '未提供建议' }}
                      </div>
                    </li>
                  </ul>
                </a-typography-paragraph>

                <a-typography-title :heading="5">优化建议</a-typography-title>
                <a-typography-paragraph
                  v-if="!reportData.optimizationSuggestions?.length"
                >
                  已是最简代码，没有优化建议。
                </a-typography-paragraph>
                <a-typography-paragraph v-else>
                  <ul class="custom-list">
                    <li
                      v-for="(
                        suggestion, index
                      ) in reportData.optimizationSuggestions"
                      :key="index"
                    >
                      <div class="list-header">
                        <span class="domain">
                          {{ suggestion.area || suggestion.type || '优化' }}
                        </span>
                      </div>
                      <div class="list-content">
                        <span class="suggestion-label">建议:</span>
                        {{
                          suggestion.suggestion ||
                          suggestion.advice ||
                          suggestion.content ||
                          '未提供具体建议'
                        }}
                      </div>
                    </li>
                  </ul>
                </a-typography-paragraph>

                <a-typography-title :heading="5">
                  代码特征分析
                </a-typography-title>
                <a-typography-paragraph v-if="reportData.codeAnalysis">
                  <div class="features-grid">
                    <div class="feature-item">
                      <div class="feature-label">时间复杂度:</div>
                      <div class="feature-value">
                        {{
                          reportData.codeAnalysis.complexity?.time ||
                          reportData.codeAnalysis.timeComplexity ||
                          '未知'
                        }}
                      </div>
                    </div>
                    <div class="feature-item">
                      <div class="feature-label">空间复杂度:</div>
                      <div class="feature-value">
                        {{
                          reportData.codeAnalysis.complexity?.space ||
                          reportData.codeAnalysis.spaceComplexity ||
                          '未知'
                        }}
                      </div>
                    </div>
                    <div class="feature-item">
                      <div class="feature-label">命名规范:</div>
                      <div class="feature-value">
                        {{
                          reportData.codeAnalysis.style?.naming ||
                          reportData.codeAnalysis.naming ||
                          '未知'
                        }}
                      </div>
                    </div>
                    <div class="feature-item">
                      <div class="feature-label">注释完整性:</div>
                      <div class="feature-value">
                        {{
                          reportData.codeAnalysis.style?.comments ||
                          reportData.codeAnalysis.comments ||
                          '未知'
                        }}
                      </div>
                    </div>
                    <div class="feature-item">
                      <div class="feature-label">代码格式:</div>
                      <div class="feature-value">
                        {{
                          reportData.codeAnalysis.style?.formatting ||
                          reportData.codeAnalysis.formatting ||
                          '未知'
                        }}
                      </div>
                    </div>
                    <div class="feature-item">
                      <div class="feature-label">编程范式:</div>
                      <div class="feature-value">
                        {{
                          reportData.codeAnalysis.paradigm ||
                          reportData.codeAnalysis.programmingParadigm ||
                          '未知'
                        }}
                      </div>
                    </div>
                  </div>
                </a-typography-paragraph>

                <a-typography-title :heading="5">
                  个性化学习路线建议
                </a-typography-title>
                <a-typography-paragraph v-if="!reportData.learningPath?.length">
                  暂无学习建议。
                </a-typography-paragraph>
                <a-typography-paragraph v-else>
                  <div class="learning-path">
                    <div
                      class="learning-topic"
                      v-for="(topic, topicIndex) in reportData.learningPath"
                      :key="topicIndex"
                    >
                      <div class="topic-header">
                        {{
                          topic.topic || topic.title || topic.name || '学习主题'
                        }}
                      </div>
                      <div class="topic-content">
                        <div class="resources" v-if="topic.resources?.length">
                          <div class="section-title">资源:</div>
                          <ul>
                            <li
                              v-for="(resource, resIndex) in topic.resources"
                              :key="resIndex"
                            >
                              <a href="#" @click.prevent>{{ resource }}</a>
                            </li>
                          </ul>
                        </div>
                        <div class="resources" v-else-if="topic.resource">
                          <div class="section-title">资源:</div>
                          <ul>
                            <li>
                              <a href="#" @click.prevent>
                                {{ topic.resource }}
                              </a>
                            </li>
                          </ul>
                        </div>
                        <div class="exercises" v-if="topic.exercises?.length">
                          <div class="section-title">练习:</div>
                          <ul>
                            <li
                              v-for="(exercise, exIndex) in topic.exercises"
                              :key="exIndex"
                            >
                              {{ exercise }}
                            </li>
                          </ul>
                        </div>
                        <div class="exercises" v-else-if="topic.exercise">
                          <div class="section-title">练习:</div>
                          <ul>
                            <li>{{ topic.exercise }}</li>
                          </ul>
                        </div>
                        <!-- 显示任何其他可能的字段 -->
                        <div
                          v-if="topic.description || topic.content"
                          class="description"
                        >
                          <div class="section-title">描述:</div>
                          <p>{{ topic.description || topic.content }}</p>
                        </div>
                        <!-- 显示学习建议 -->
                        <div
                          v-if="topic.learningSuggestion"
                          class="learning-suggestion"
                        >
                          <div class="section-title">学习建议:</div>
                          <p>{{ topic.learningSuggestion }}</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </a-typography-paragraph>
              </a-typography>
            </a-card>
          </a-col>
        </a-row>
      </div>
    </a-spin>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import { useRoute } from 'vue-router';
import { IconRobot, IconCode } from '@arco-design/web-vue/es/icon';
import { OjProblemSubmitService } from '@/api/gen-api/services/OjProblemSubmitService';
import { OjProblemService } from '@/api/gen-api/services/OjProblemService';
import { Message } from '@arco-design/web-vue';
import dayjs from 'dayjs';

const route = useRoute();
const loading = ref(true);

// 题目和提交信息
const problemId = ref('');
const problemTitle = ref('');
const status = ref('');
const memory = ref('');
const time = ref('');
const submitTime = ref('');
const submittedCode = ref('');

// AI分析报告解析后的数据
const reportData = ref<any>({
  syntaxCheck: { hasError: false, errors: [] },
  logicErrors: [],
  optimizationSuggestions: [],
  codeAnalysis: {
    complexity: { time: '', space: '' },
    style: { naming: '', comments: '', formatting: '' },
    paradigm: ''
  },
  learningPath: []
});

// 状态转换
const statusMap: Record<number, string> = {
  0: '待判题',
  1: '判题中',
  2: '成功',
  3: '成功',
  4: '失败'
};

// 控制API请求的状态标志
let reportApiRequested = false;

// 获取提交记录详情
const fetchSubmitInfo = async (submitId: string | number) => {
  try {
    // 使用字符串ID而不是数字，防止精度丢失
    const response = await OjProblemSubmitService.getInfo(submitId);

    if (response.code === 200 && response.result) {
      const submitInfo = response.result;
      console.log('提交记录详情:', submitInfo);

      // 添加详细调试信息
      console.log('提交记录字段检查:');
      console.log('- id:', submitInfo.id);
      console.log('- questionId:', submitInfo.questionId);
      console.log('- title:', submitInfo.title);
      console.log('- createTime:', submitInfo.createTime);
      console.log('- code 长度:', submitInfo.code?.length);
      console.log('- judgeInfo:', submitInfo.judgeInfo);

      // 更新界面数据
      problemId.value = submitInfo.questionId?.toString() || '';

      // 设置题目名称 - 优先使用title字段，如果没有则使用问题ID构建一个标题
      if (submitInfo.title) {
        problemTitle.value = submitInfo.title;
        console.log('使用后端返回的题目标题:', problemTitle.value);
      } else {
        // 如果后端没有返回title字段，则使用问题ID来构造一个标题
        fetchProblemTitle(submitInfo.questionId);
      }

      status.value =
        submitInfo.status === 2 || submitInfo.status === 3
          ? 'Accepted'
          : 'Failed';

      // 判题信息
      if (submitInfo.judgeInfo) {
        memory.value = submitInfo.judgeInfo.memory?.toString() || '0';
        time.value = submitInfo.judgeInfo.time?.toString() || '0';
      }

      // 直接使用createTime字段，不再需要类型转换
      if (submitInfo.createTime) {
        submitTime.value = dayjs(submitInfo.createTime).format(
          'YYYY-MM-DD HH:mm:ss'
        );
      } else {
        // 如果没有createTime字段，尝试从ID生成一个估算时间
        try {
          const idStr = String(submitInfo.id);
          const snowflakeTimestamp = BigInt(idStr) >> 22n;
          const epoch = new Date('2023-01-01').getTime();
          const timestamp = Number(snowflakeTimestamp) + epoch;
          submitTime.value =
            dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss') + ' (估算)';
        } catch (e) {
          submitTime.value = '未知';
        }
      }

      // 提交代码
      submittedCode.value = submitInfo.code || '暂无代码';
    } else {
      Message.error('获取提交记录失败：' + (response.message || '未知错误'));
    }
  } catch (error) {
    console.error('获取提交记录错误:', error);
    Message.error('获取提交记录失败');
  }
};

// 如果后端没有返回题目名称，则通过问题ID获取题目信息
const fetchProblemTitle = async (questionId: number | string | undefined) => {
  if (!questionId) {
    problemTitle.value = '未知题目';
    return;
  }

  try {
    // 调用OjProblemService.getInfo API获取题目信息
    const response = await OjProblemService.getInfo(String(questionId));
    if (response.code === 200 && response.result) {
      // 设置题目名称
      problemTitle.value = response.result.title || `题目 #${questionId}`;
      console.log('获取到题目名称:', problemTitle.value);
    } else {
      // 如果API调用失败，使用ID作为标题
      problemTitle.value = `题目 #${questionId}`;
      console.log('获取题目信息失败，使用ID作为标题:', problemTitle.value);
    }
  } catch (error) {
    console.error('获取题目信息错误:', error);
    problemTitle.value = `题目 #${questionId}`;
  }
};

// 获取AI分析报告
const fetchAnalysisReport = async (submitId: string | number) => {
  try {
    // 防止重复请求
    if (reportApiRequested) {
      console.log('AI分析报告已经请求过，跳过重复请求');
      return;
    }

    reportApiRequested = true;
    console.log('开始请求AI分析报告, ID:', submitId);

    const response = await OjProblemSubmitService.getAnalysisReport(submitId);
    console.log('AI分析报告响应:', response);

    if (response.code === 200 && response.result) {
      try {
        // 注意: response.result是一个JSON字符串，需要先解析
        console.log(
          '响应result是字符串类型:',
          typeof response.result === 'string'
        );

        // 将result字符串解析为对象
        const resultObj = JSON.parse(response.result);
        console.log('解析后的result对象:', resultObj);

        // 提取OpenAI返回的message内容
        if (resultObj && resultObj.message && resultObj.message.content) {
          const content = resultObj.message.content;
          console.log('找到message.content内容，长度:', content.length);

          // 从content中提取代码块中的JSON
          const codeBlockMatch = content.match(
            /```(?:json)?\s*\n([\s\S]*?)\n```/
          );
          if (codeBlockMatch && codeBlockMatch[1]) {
            try {
              // 解析代码块中的JSON
              const jsonStr = codeBlockMatch[1].trim();
              console.log('提取到代码块内容，长度:', jsonStr.length);

              const parsedData = JSON.parse(jsonStr);
              console.log(
                '成功解析代码块中的JSON:',
                Object.keys(parsedData).join(', ')
              );

              // 设置reportData
              reportData.value = parsedData;
              console.log('成功设置reportData数据');
              return;
            } catch (parseError) {
              console.error('解析代码块JSON失败:', parseError);
            }
          } else {
            console.log('没有找到代码块，尝试直接从content中提取JSON');

            // 尝试从content中直接提取JSON
            try {
              const firstBrace = content.indexOf('{');
              const lastBrace = content.lastIndexOf('}');

              if (
                firstBrace !== -1 &&
                lastBrace !== -1 &&
                firstBrace < lastBrace
              ) {
                const jsonStr = content.substring(firstBrace, lastBrace + 1);
                console.log('从content中提取潜在的JSON，长度:', jsonStr.length);

                const parsedData = JSON.parse(jsonStr);
                console.log('成功解析content中的JSON');

                reportData.value = parsedData;
                return;
              }
            } catch (contentError) {
              console.error('从content中提取JSON失败:', contentError);
            }
          }

          // 如果代码块和content都没有成功提取到JSON，显示提取失败信息
          console.warn('从message.content中提取JSON失败，使用默认结构显示错误');
          reportData.value = {
            syntaxCheck: { hasError: false, errors: [] },
            logicErrors: [
              {
                description: '数据解析失败',
                cause: '无法从API响应中提取有效的JSON数据',
                suggestion: '请联系管理员检查API返回格式'
              }
            ],
            optimizationSuggestions: [],
            codeAnalysis: {
              complexity: { time: '未知', space: '未知' },
              style: { naming: '未知', comments: '未知', formatting: '未知' },
              paradigm: '未知'
            },
            learningPath: []
          };
        } else {
          console.error('解析后的结果中没有message.content字段');
          reportData.value = {
            syntaxCheck: { hasError: false, errors: [] },
            logicErrors: [
              {
                description: '响应格式错误',
                cause: 'API响应中不包含有效的message.content字段',
                suggestion: '请联系管理员检查API返回格式'
              }
            ],
            optimizationSuggestions: [],
            codeAnalysis: {
              complexity: { time: '未知', space: '未知' },
              style: { naming: '未知', comments: '未知', formatting: '未知' },
              paradigm: '未知'
            },
            learningPath: []
          };
        }
      } catch (error) {
        console.error('解析response.result失败:', error);
        reportData.value = {
          syntaxCheck: { hasError: false, errors: [] },
          logicErrors: [
            {
              description: '数据解析错误',
              cause: `解析API响应数据失败: ${error}`,
              suggestion: '请联系管理员检查API返回格式'
            }
          ],
          optimizationSuggestions: [],
          codeAnalysis: {
            complexity: { time: '未知', space: '未知' },
            style: { naming: '未知', comments: '未知', formatting: '未知' },
            paradigm: '未知'
          },
          learningPath: []
        };
      }
    } else {
      console.log('API返回错误或无数据');
      reportData.value = {
        syntaxCheck: { hasError: false, errors: [] },
        logicErrors: [
          {
            description: 'API响应错误',
            cause: `服务器返回错误或无数据: ${response.message || '未知错误'}`,
            suggestion: '请稍后重试'
          }
        ],
        optimizationSuggestions: [],
        codeAnalysis: {
          complexity: { time: '未知', space: '未知' },
          style: { naming: '未知', comments: '未知', formatting: '未知' },
          paradigm: '未知'
        },
        learningPath: []
      };
    }
  } catch (error) {
    console.error('API请求错误:', error);
    reportData.value = {
      syntaxCheck: { hasError: false, errors: [] },
      logicErrors: [
        {
          description: '请求失败',
          cause: `无法连接到API: ${error}`,
          suggestion: '请检查网络连接'
        }
      ],
      optimizationSuggestions: [],
      codeAnalysis: {
        complexity: { time: '未知', space: '未知' },
        style: { naming: '未知', comments: '未知', formatting: '未知' },
        paradigm: '未知'
      },
      learningPath: []
    };
  } finally {
    // 防止UI卡死
    loading.value = false;

    // 打印最终数据
    setTimeout(() => {
      console.log('最终reportData结果:');
      if (reportData.value) {
        console.log('- syntaxCheck:', !!reportData.value.syntaxCheck);
        console.log(
          '- logicErrors:',
          Array.isArray(reportData.value.logicErrors)
        );
        console.log('- codeAnalysis:', !!reportData.value.codeAnalysis);

        if (reportData.value.codeAnalysis) {
          console.log(
            '  - 时间复杂度:',
            reportData.value.codeAnalysis.complexity?.time || '未知'
          );
          console.log(
            '  - 代码范式:',
            reportData.value.codeAnalysis.paradigm || '未知'
          );
        }
      }
    }, 100);
  }
};

// 监听reportData变化，仅用于调试
watch(
  () => reportData.value,
  newValue => {
    console.log('reportData已更新，但不会触发新的API请求');
  },
  { deep: true }
);

onMounted(async () => {
  const recordId = route.params.id;

  console.log('report页面获取到的路由参数ID:', recordId);

  // 确保recordId是有效值
  if (!recordId) {
    Message.error('提交记录ID不存在');
    loading.value = false;
    return;
  }

  // 处理数组类型的情况
  const actualRecordId = Array.isArray(recordId) ? recordId[0] : recordId;
  console.log('处理后的recordId:', actualRecordId);

  try {
    loading.value = true;

    // 设置初始数据结构
    reportData.value = {
      syntaxCheck: { hasError: false, errors: [] },
      logicErrors: [],
      optimizationSuggestions: [],
      codeAnalysis: {
        complexity: { time: '', space: '' },
        style: { naming: '', comments: '', formatting: '' },
        paradigm: ''
      },
      learningPath: []
    };

    // 确保API只调用一次
    reportApiRequested = false;

    // 顺序执行请求，避免并行导致的可能问题
    await fetchSubmitInfo(String(actualRecordId));
    await fetchAnalysisReport(String(actualRecordId));

    console.log('数据加载完成');
  } catch (error) {
    console.error('加载数据错误:', error);
  } finally {
    loading.value = false;
  }
});
</script>

<style scoped lang="less">
.container-report {
  padding: 0 20px 20px;

  .report-content {
    background: #fff;
    border-radius: 4px;
    padding: 20px;
    max-width: 1400px;
    margin: 0 auto;
  }

  .report-header {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border);

    .problem-info {
      margin-bottom: 16px;

      h2 {
        font-size: 18px;
        margin: 0 0 8px;
        color: #2759cd;
      }

      h3 {
        font-size: 16px;
        margin: 0;
        color: var(--color-text-2);
      }
    }

    .submission-info {
      display: flex;
      align-items: center;

      .info-label {
        color: var(--color-text-3);
        font-size: 14px;
      }

      .info-value {
        color: var(--color-text-1);
        font-weight: 500;
        font-size: 14px;
      }
    }
  }

  .card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #2759cd;

    .arco-icon {
      font-size: 18px;
    }
  }

  .code-card {
    margin-bottom: 16px;
    height: 100%;

    .code-wrapper {
      height: 100%;
      max-height: 650px;
      overflow-y: auto;
      border-radius: 4px;
    }

    .code-block {
      background: var(--color-fill-2);
      padding: 16px;
      border-radius: 4px;
      margin: 0;
      font-family: 'Courier New', monospace;
      line-height: 1.5;
      font-size: 14px;
      overflow-x: auto;
    }
  }

  .analysis-card {
    margin-bottom: 16px;
    height: 100%;

    :deep(.arco-typography) {
      line-height: 1.6;

      h5 {
        margin: 16px 0 8px;
        color: #2759cd;
        font-weight: 600;
        font-size: 16px;
        border-left: 3px solid #2759cd;
        padding-left: 10px;
      }

      p {
        margin: 12px 0;
      }

      ul {
        padding-left: 20px;
        margin: 8px 0;

        li {
          margin-bottom: 8px;
        }
      }

      code {
        background-color: var(--color-fill-2);
        padding: 2px 4px;
        border-radius: 3px;
        font-family: monospace;
        color: #d56161;
      }

      a {
        color: #2759cd;
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }
    }

    .custom-list {
      padding: 0;
      list-style: none;

      li {
        margin-bottom: 16px;
        background-color: var(--color-fill-1);
        border-radius: 6px;
        overflow: hidden;

        .list-header {
          padding: 8px 12px;
          background-color: rgba(39, 89, 205, 0.1);

          .domain {
            color: #2759cd;
            font-weight: 500;
          }
        }

        .list-content {
          padding: 10px 12px;

          .suggestion-label {
            font-weight: 500;
            margin-right: 4px;
          }
        }
      }
    }

    .features-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 12px;
      margin: 16px 0;

      .feature-item {
        display: flex;
        align-items: center;

        .feature-label {
          font-weight: 500;
          margin-right: 8px;
          color: var(--color-text-2);
          min-width: 100px;
        }

        .feature-value {
          color: var(--color-text-1);
        }
      }
    }

    .learning-path {
      .learning-topic {
        margin-bottom: 20px;
        border: 1px solid var(--color-border);
        border-radius: 6px;
        overflow: hidden;

        .topic-header {
          padding: 10px 16px;
          background-color: rgba(39, 89, 205, 0.1);
          color: #2759cd;
          font-weight: 600;
        }

        .topic-content {
          padding: 12px 16px;

          .section-title {
            font-weight: 500;
            margin: 6px 0;
          }

          .resources,
          .exercises {
            margin-bottom: 10px;

            ul {
              margin: 4px 0;
            }
          }
        }
      }
    }
  }
}
</style>
